<template>
  <div>
    <div v-title>支付订单</div>
    <!--消息-->
    <!-- <div class="D1">
        <div class="iconfont icon-gonggao D1T1"></div>
        <van-notice-bar style="width:90%;background:#fff5e6;" text="等待您付款，请在24小时内完成支付，超时订单自动取消">
        </van-notice-bar>
      </div>-->

    <!--金额-->
    <div class="D2">
      <div v-if="QJ" class="D2T1">该期应付金额(￥)</div>
      <div v-if="!QJ" class="D2T1">应付金额(￥)</div>
      <div class="D2T2">{{Data.OrderAmount}}</div>
      <template v-if="QJ">
        <div class="D2T3" style="margin-top:20px;">
          <div>本金</div>
          <div>￥{{Data.Amount}}</div>
        </div>
        <div class="D2T3">
          <div>手续费</div>
          <div>￥{{Data.ServiceCharge}}</div>
        </div>
      </template>
    </div>

    <!--支付方式-->
    <div class="D3">
      <div>
        <div class="D31">
          <div class="iconfont icon-weixinzhifu2"></div>
          <div>微信支付</div>
        </div>
        <van-radio name="1" v-model="ZF"></van-radio>
      </div>
    </div>

    <!--确认按钮-->
    <div v-if="QJ" @click="PayTheWay()" class="D4">
      确认支付
    </div>
    <!--确认按钮-->
    <div v-if="!QJ" @click="PayTheWay1()" class="D4">
      确认支付
    </div>
    <van-popup :close-on-click-overlay="false" v-model="show">
      <van-loading style="background: rgba(0,0,0,.7);" type="spinner" color="white" />
    </van-popup>
  </div>
</template>
<style src="../css/iconfont.css"></style>
<script>
import api from '../fetch/api.js';
import {
  NoticeBar,
  Radio,
  Toast,
  Loading,
  Popup
} from 'vant';
export default {
  components: {
    [NoticeBar.name]: NoticeBar,
    [Radio.name]: Radio,
    [Toast.name]: Toast,
    [Loading.name]: Loading,
    [Popup.name]: Popup,
  },
  data() {
    return {
      //支付方式
      ZF: '1',
      //保存数据
      Data: '',
      //判断是否强交险
      QJ: true,
      show: false,
    }
  },
  methods: {
    //获取订单数据
    GetInfor() {
      api.Post("Order/StagingDetail/GetNowStagingDetail", {
        PolicyID: this.$route.params.id,
        PeriodsCount: this.$route.params.number,
      }).then(res => {
        this.Data = res;
      })
    },
    //获取订单数据
    GetInfor1() {
      api.Post("Insurance/PHInsuranceOrder/GetModel", {
        ID: this.$route.params.id,
      }).then(res => {
        this.Data = res;
      })
    },
    //支付订单
    PayTheWay() {
      this.show = true;
      let _this = this;
      api.Post("Order/StagingDetail/OrderPay", {
        OrderID: this.$route.params.id,
        PayTheWay: 0,
        PeriodsCount: this.Data.PeriodsCount,
      }).then(res => {
        this.show = false;
        if (res.Success) {
          api.Post("Pay/WeiXinPay/Pay", {
            VoucherNumber: res.Infor
          }).then(res1 => {
            //进入微信支付
            location.href = "http://m.nbbaijin.com/WeiXinPay.html?VoucherNumber=" + res.Infor;
          })
        } else {
          Toast({
            message: res.Msg,
            position: top,
          });
        }
      })
    },
    //强交险支付订单
    PayTheWay1() {
      this.show = true;
      let _this = this;
      api.Post("Insurance/PHInsuranceOrder/PHOrderPay", {
        OrderID: this.$route.params.id,
        PayTheWay: 0,
      }).then(res => {
        this.show = false;
        if (res.Success) {
          //进入微信支付
          location.href = "http://m.nbbaijin.com/WeiXinPay.html?VoucherNumber=" + res.Infor;
        } else {
          Toast({
            message: res.Msg,
            position: top,
          });
        }
      })
    },
  },
  mounted() {
    if (this.$route.params.number == '-1') {
      this.QJ = false;
    }
    if (this.$route.params.number != '-1') {
      this.GetInfor();
    } else {
      this.GetInfor1();
    }
  }
}

</script>
<style scoped>
.D1T1 {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 10%;
  background: #fff5e6;
  color: #f33e16;
  font-size: 20px;
}

.D1 {
  display: flex;
}

.D4 {
  width: 90%;
  height: 45px;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  background: #2491ff;
  margin: 0 auto;
  margin-top: 50px;
  font-size: 16px;
  color: rgb(254, 254, 254);
}

.D31>div:first-child {
  font-size: 25px;
  margin-right: 10px;
  color: #2aa139;
}

.D31>div {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: rgb(51, 51, 51);
}

.D31 {
  display: flex;
  align-items: center;
  height: 100%;
}

.D3>div {
  height: 50px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.D3 {
  width: 90%;
  background: #fff;
  padding: 10px 5%;
  margin-top: 10px;
}

.D2T3 {
  justify-content: space-between;
  height: 35px;
  align-items: center;
  font-size: 14px;
  color: rgb(51, 51, 51);
}

.D2T1 {
  justify-content: center;
  height: 30px;
  align-items: center;
  font-size: 14px;
  color: rgb(102, 102, 102);
}

.D2T2 {
  font-size: 30px;
  color: rgb(243, 62, 22);
  align-items: center;
  justify-content: center;
}

body {
  margin: 0;
}

.D2 {
  width: 90%;
  background: #fff;
  padding: 20px 5%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.D2>div {
  width: 100%;
  display: flex;
}
</style>
<style>
body {
  margin: 0;
}
</style>
